import 'dart:math';

import 'package:english_words/english_words.dart';
import 'package:flutter/material.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
import 'package:my_flutter_app/main.dart';

class ScrollableWidgetTestRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("ScrollableWidgetTest"),
      ),
      body: SingleChildScrollView(
        child: Padding(
          padding: EdgeInsets.all(20.0),
          child: Column(
            children: <Widget>[
              RaisedButton(
                child: Text("SingleChildScrollView"),
                onPressed: () => {
                  Navigator.push(
                    context,
                    MaterialPageRoute(builder: (context) {
                      return SingleChildScrollViewTestRoute();
                    }),
                  ),
                },
              ),
              RaisedButton(
                child: Text("ListView1"),
                onPressed: () => {
                  Navigator.push(
                    context,
                    MaterialPageRoute(builder: (context) {
                      return ListViewTestRoute1();
                    }),
                  ),
                },
              ),
              RaisedButton(
                child: Text("ListView2"),
                onPressed: () => {
                  Navigator.push(
                    context,
                    MaterialPageRoute(builder: (context) {
                      return ListViewTestRoute2();
                    }),
                  ),
                },
              ),
              RaisedButton(
                child: Text("ListView3"),
                onPressed: () => {
                  Navigator.push(
                    context,
                    MaterialPageRoute(builder: (context) {
                      return ListViewTestRoute3();
                    }),
                  ),
                },
              ),
              RaisedButton(
                child: Text("InfiniteListView"),
                onPressed: () => {
                  Navigator.push(
                    context,
                    MaterialPageRoute(builder: (context) {
                      return InfiniteListView();
                    }),
                  ),
                },
              ),
              Text("GridView"),
              RaisedButton(
                child: Text("SliverGridDelegateWithFixedCrossAxisCount"),
                onPressed: () => {
                  Navigator.push(
                    context,
                    MaterialPageRoute(builder: (context) {
                      return GridViewTestRoute1();
                    }),
                  ),
                },
              ),
              RaisedButton(
                child: Text("SliverGridDelegateWithMaxCrossAxisExtent"),
                onPressed: () => {
                  Navigator.push(
                    context,
                    MaterialPageRoute(builder: (context) {
                      return GridViewTestRoute2();
                    }),
                  ),
                },
              ),
              RaisedButton(
                child: Text("InfiniteGridView"),
                onPressed: () => {
                  Navigator.push(
                    context,
                    MaterialPageRoute(builder: (context) {
                      return InfiniteGridView();
                    }),
                  ),
                },
              ),
              RaisedButton(
                child: Text("CustomScrollViewTestRoute"),
                onPressed: () => {
                  Navigator.push(
                    context,
                    MaterialPageRoute(builder: (context) {
                      return CustomScrollViewTestRoute();
                    }),
                  ),
                },
              ),
              RaisedButton(
                child: Text("ScrollControllerTestRoute"),
                onPressed: () => {
                  Navigator.push(
                    context,
                    MaterialPageRoute(builder: (context) {
                      return ScrollControllerTestRoute();
                    }),
                  ),
                },
              ),
              RaisedButton(
                child: Text("ScrollNotificationTestRoute"),
                onPressed: () => {
                  Navigator.push(
                    context,
                    MaterialPageRoute(builder: (context) {
                      return ScrollNotificationTestRoute();
                    }),
                  ),
                },
              ),

              // ScrollControllerTestRoute
              RaisedButton(
                child: Text("Example01"),
                onPressed: () => {
                  Navigator.push(
                    context,
                    MaterialPageRoute(builder: (context) {
                      return Example01();
                    }),
                  ),
                },
              ),
              RaisedButton(
                child: Text("Example02"),
                onPressed: () => {
                  Navigator.push(
                    context,
                    MaterialPageRoute(builder: (context) {
                      return Example02();
                    }),
                  ),
                },
              ),
              RaisedButton(
                child: Text("Example03"),
                onPressed: () => {
                  Navigator.push(
                    context,
                    MaterialPageRoute(builder: (context) {
                      return Example03();
                    }),
                  ),
                },
              ),
              RaisedButton(
                child: Text("Example04"),
                onPressed: () => {
                  Navigator.push(
                    context,
                    MaterialPageRoute(builder: (context) {
                      return Example04();
                    }),
                  ),
                },
              ),
              RaisedButton(
                child: Text("Example05"),
                onPressed: () => {
                  Navigator.push(
                    context,
                    MaterialPageRoute(builder: (context) {
                      return Example05();
                    }),
                  ),
                },
              ),
              RaisedButton(
                child: Text("Example06"),
                onPressed: () => {
                  Navigator.push(
                    context,
                    MaterialPageRoute(builder: (context) {
                      return Example06();
                    }),
                  ),
                },
              ),

            ],
          ),
        ),
      ),
    );
  }
}

class SingleChildScrollViewTestRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    //Scrollable(viewportBuilder: null);


    String str = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ";
    return Scaffold(
      appBar: AppBar(title: Text("SingleChildScrollView"),),
      body: Scrollbar(
        child: SingleChildScrollView(
          // scrollDirection: Axis.vertical,
          padding: EdgeInsets.all(16.0),
          child: Center(
            child: Column(
              children: str
                  .split("")
                  .map((e) => Text(
                        e,
                        textScaleFactor: 2.0,
                      ))
                  .toList(),
            ),
          ),
        ),
      ),
    );
  }
}

class ListViewTestRoute1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("ListViewTest"),
      ),
      body: ListView(
        shrinkWrap: true,
        padding: EdgeInsets.all(20.0),
        children: <Widget>[
          const Text('I\'m dedicating every day to you'),
          const Text('Domestic life was never quite my style'),
          const Text('When you smile, you knock me out, I fall apart'),
          const Text('And I thought I was so smart'),
        ],
      ),
    );
  }
}

class ListViewTestRoute2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("ListView.builder"),
      ),
      body: ListView.builder(
        itemCount: 100,
        itemExtent: 50.0,
        itemBuilder: (BuildContext context, int index) {
          return ListTile(
            title: Text("$index"),
          );
        },
      ),
    );
  }
}

class ListViewTestRoute3 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    Widget divider1 = Divider(
      color: Colors.blue,
    );
    Widget divider2 = Divider(
      color: Colors.green,
    );
    return Scaffold(
      appBar: AppBar(
        title: Text("ListView.separated"),
      ),
      body: ListView.separated(
        itemCount: 100,
        itemBuilder: (BuildContext context, int index) {
          return ListTile(
            title: Text("$index"),
          );
        },
        separatorBuilder: (BuildContext context, int index) {
          return index % 2 == 0 ? divider1 : divider2;
        },
      ),
    );
  }
}

class InfiniteListView extends StatefulWidget {
  @override
  _InfiniteListViewState createState() => _InfiniteListViewState();
}

class _InfiniteListViewState extends State<InfiniteListView> {
  static const loadingTag = "##loading##";

  var _words = <String>[loadingTag];

  @override
  void initState() {
    super.initState();
    _retrieveData();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("InfiniteListView"),
      ),
      body: Column(
        children: <Widget>[
          ListTile(title: Text("商品列表")),
          Expanded(
            child: ListView.separated(
              itemCount: _words.length,
              itemBuilder: (context, index) {
                if (_words[index] == loadingTag) {
                  if (_words.length - 1 < 100) {
                    _retrieveData();
                    return Container(
                      padding: const EdgeInsets.all(16.0),
                      alignment: Alignment.center,
                      child: SizedBox(
                        width: 24.0,
                        height: 24.0,
                        child: CircularProgressIndicator(
                          strokeWidth: 2.0,
                        ),
                      ),
                    );
                  } else {
                    return Container(
                      alignment: Alignment.center,
                      padding: EdgeInsets.all(16.0),
                      child: Text(
                        "没有更多了",
                        style: TextStyle(color: Colors.grey),
                      ),
                    );
                  }
                }

                return ListTile(
                  title: Text(_words[index]),
                );
              },
              separatorBuilder: (context, index) => Divider(
                color: Colors.green,
                height: 1.0,
              ),
            ),
          ),
        ],
      ),
    );
  }

  void _retrieveData() {
    Future.delayed(Duration(seconds: 2)).then((e) {
      _words.insertAll(_words.length - 1,
          generateWordPairs().take(20).map((e) => e.asPascalCase).toList());
      setState(() {});
    });
  }
}

class GridViewTestRoute1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("GridViewTestRoute1"),
      ),
      // "SliverGridDelegateWithFixedCrossAxisCount"
      body: Column(
        children: <Widget>[
          ListTile(
            title: Text("SliverGridDelegateWithFixedCrossAxisCount"),
          ),
          Expanded(
            child:
            GridView.count(
              crossAxisCount: 3,
              childAspectRatio: 1.0,
              children: <Widget>[
                Icon(Icons.ac_unit),
                Icon(Icons.airport_shuttle),
                Icon(Icons.all_inclusive),
                Icon(Icons.beach_access),
                Icon(Icons.cake),
                Icon(Icons.free_breakfast),
              ],
            ),

//            GridView(
//              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
//                crossAxisCount: 3,
//                childAspectRatio: 1.0,
//              ),
//              children: <Widget>[
//                Icon(Icons.ac_unit),
//                Icon(Icons.airport_shuttle),
//                Icon(Icons.all_inclusive),
//                Icon(Icons.beach_access),
//                Icon(Icons.cake),
//                Icon(Icons.free_breakfast),
//              ],
//            ),
          ),
        ],
      ),
    );
  }
}

class GridViewTestRoute2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("GridViewTestRoute2"),
      ),
      // "SliverGridDelegateWithFixedCrossAxisCount"
      body: Column(
        children: <Widget>[
          ListTile(
            title: Text("SliverGridDelegateWithMaxCrossAxisExtent"),
          ),
          Expanded(
            child:
//            GridView.extent(
//              maxCrossAxisExtent: 100.0,
//              childAspectRatio: 2.0,
//              children: <Widget>[
//                Icon(Icons.ac_unit),
//                Icon(Icons.airport_shuttle),
//                Icon(Icons.all_inclusive),
//                Icon(Icons.beach_access),
//                Icon(Icons.cake),
//                Icon(Icons.free_breakfast),
//              ],
//            ),

            GridView(
              padding: EdgeInsets.zero,
              gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
                maxCrossAxisExtent: 100.0,
                childAspectRatio: 2.0,
              ),
              children: <Widget>[
                Icon(Icons.ac_unit),
                Icon(Icons.airport_shuttle),
                Icon(Icons.all_inclusive),
                Icon(Icons.beach_access),
                Icon(Icons.cake),
                Icon(Icons.free_breakfast),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

class InfiniteGridView extends StatefulWidget {
  @override
  _InfiniteGridViewState createState() => _InfiniteGridViewState();
}

class _InfiniteGridViewState extends State<InfiniteGridView> {
  List<IconData> _icons = [];

  @override
  void initState() {
    super.initState();
    _retrieveIcons();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("InfiniteGridView"),
      ),
      body: GridView.builder(
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 3,
          childAspectRatio: 1.0,
        ),
        itemCount: _icons.length,
        itemBuilder: (context, index) {
          if (index == _icons.length - 1 && _icons.length < 200) {
            _retrieveIcons();
          }
          return Icon(_icons[index]);
        },
      ),
    );
  }

  void _retrieveIcons() {
    Future.delayed(Duration(milliseconds: 200)).then((e) {
      setState(() {
        _icons.addAll([
          Icons.ac_unit,
          Icons.airport_shuttle,
          Icons.all_inclusive,
          Icons.beach_access,
          Icons.cake,
          Icons.free_breakfast,
        ]);
      });
    });
  }
}

class CustomScrollViewTestRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {

    return Material(
      child: CustomScrollView(
        slivers: <Widget>[

          SliverAppBar(
            pinned: true,
            expandedHeight: 250.0,
            flexibleSpace: FlexibleSpaceBar(
              title: const Text("CustomScrollView"),
              background: Image.asset(
                "images/orange.jpg",
                fit: BoxFit.cover,
              ),
            ),
          ),

          SliverStaggeredGrid.countBuilder(
            crossAxisCount: 4,
            itemCount: 20,
            itemBuilder: (context, index) => Container(
              color: Colors.red,
              child: Center(
                child: CircleAvatar(
                  backgroundColor: Colors.white,
                  child: Text("$index"),
                ),
              ),
            ),
            staggeredTileBuilder: (index) => StaggeredTile.count(
              2,
              index.isEven ? 2 : 1, // 偶数2，奇数1
            ),
            mainAxisSpacing: 4.0,
            crossAxisSpacing: 4.0,
          ),

          SliverPadding(
            padding: EdgeInsets.all(8.0),
            sliver: SliverGrid(
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 2, // 按两列显示
                mainAxisSpacing: 10.0, // 主轴间隔
                crossAxisSpacing: 10.0, // 横轴间隔
                childAspectRatio: 4.0, // Item在横州尺寸与主轴尺寸之比
              ),
              delegate: SliverChildBuilderDelegate(
                (BuildContext context, int index) => Container(
                  alignment: Alignment.center,
                  color: Colors.cyan[100 * (index % 9)],
                  child: Text("grid item $index"),
                ),
                childCount: 20,
              ),
            ),
          ),
          SliverFixedExtentList(
            itemExtent: 50.0, // 固定Item高度
            delegate: SliverChildBuilderDelegate(
              (BuildContext context, int index) => Container(
                alignment: Alignment.center,
                color: Colors.lightBlue[100 * (index % 9)],
                child: Text("list item $index"),
              ),
              childCount: 50,
            ),
          ),
        ],
      ),
    );
  }
}

class ScrollControllerTestRoute extends StatefulWidget {
  @override
  _ScrollControllerTestRouteState createState() =>
      _ScrollControllerTestRouteState();
}

class _ScrollControllerTestRouteState extends State<ScrollControllerTestRoute> {
  ScrollController _scrollController = ScrollController();
  bool _showToTopBtn = false;
  PageStorage p;

  @override
  void initState() {
    super.initState();
    _scrollController.addListener(() {
      print(MY_TAG_1 + _scrollController.offset.toString());
      if (_scrollController.offset < 1000 && _showToTopBtn) {
        setState(() {
          _showToTopBtn = false;
        });
      } else if (_scrollController.offset > 1000 && _showToTopBtn == false) {
        setState(() {
          _showToTopBtn = true;
        });
      }
    });
  }

  @override
  void dispose() {
    // 防止内存泄漏
    _scrollController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("滚动控制ScrollController"),
      ),
      body: Scrollbar(
        child: ListView.builder(
          itemCount: 100,
          itemExtent: 50.0,
          controller: _scrollController,
          itemBuilder: (context, index) => ListTile(
            title: Text("$index"),
          ),
        ),
      ),
      floatingActionButton: !_showToTopBtn
          ? null
          : FloatingActionButton(
              child: Icon(Icons.arrow_upward),
              onPressed: () {
                _scrollController.animateTo(.0,
                    duration: Duration(milliseconds: 200), curve: Curves.ease);
              },
            ),
    );
  }
}

class ScrollNotificationTestRoute extends StatefulWidget {
  @override
  _ScrollNotificationTestRouteState createState() =>
      _ScrollNotificationTestRouteState();
}

class _ScrollNotificationTestRouteState
    extends State<ScrollNotificationTestRoute> {
  String _progress = "0%"; //保存进度百分比

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Scrollbar(
        child: NotificationListener<ScrollNotification>(
          onNotification: (ScrollNotification notification) {
            double progress = notification.metrics.pixels /
                notification.metrics.maxScrollExtent;
            setState(() {
              _progress = "${(progress * 100).toInt()}%";
            });
            print(MY_TAG_1 +
                "BottomEdge:${notification.metrics.extentAfter == 0}");
            return true;
          },
          child: Stack(
            alignment: Alignment.center,
            children: <Widget>[
              // Text(),
              ListView.builder(
                itemCount: 100,
                itemExtent: 50.0,
                itemBuilder: (context, index) {
                  return ListTile(
                    title: Text("$index"),
                  );
                },
              ),
              CircleAvatar(
                radius: 30.0,
                child: Text(_progress),
                backgroundColor: Colors.black54,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

class Example02 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Example02"),
      ),
      body: Padding(
        padding: EdgeInsets.all(4.0),
        child: StaggeredGridView.countBuilder(
          crossAxisCount: 4,
          itemCount: 20,
          itemBuilder: (context, index) => Container(
            color: Colors.red,
            child: Center(
              child: CircleAvatar(
                backgroundColor: Colors.white,
                child: Text("$index"),
              ),
            ),
          ),
          staggeredTileBuilder: (index) => StaggeredTile.count(
            2,
            index.isEven ? 2 : 1, // 偶数2，奇数1
          ),
          mainAxisSpacing: 4.0,
          crossAxisSpacing: 4.0,
        ),
      ),
    );
  }
}

class Example01 extends StatelessWidget {
  List<StaggeredTile> _staggeredTiles = const <StaggeredTile>[
    const StaggeredTile.count(2, 2),
    const StaggeredTile.count(2, 1),
    const StaggeredTile.count(1, 2),
    const StaggeredTile.count(1, 1),
    const StaggeredTile.count(2, 2),
    const StaggeredTile.count(1, 2),
    const StaggeredTile.count(1, 1),
    const StaggeredTile.count(3, 1),
    const StaggeredTile.count(1, 1),
    const StaggeredTile.count(4, 1),
  ];

  List<Widget> _tiles = const <Widget>[
    const _Example01Tile(Colors.green, Icons.widgets),
    const _Example01Tile(Colors.lightBlue, Icons.wifi),
    const _Example01Tile(Colors.amber, Icons.panorama_wide_angle),
    const _Example01Tile(Colors.brown, Icons.map),
    const _Example01Tile(Colors.deepOrange, Icons.send),
    const _Example01Tile(Colors.indigo, Icons.airline_seat_flat),
    const _Example01Tile(Colors.red, Icons.bluetooth),
    const _Example01Tile(Colors.pink, Icons.battery_alert),
    const _Example01Tile(Colors.purple, Icons.desktop_windows),
    const _Example01Tile(Colors.blue, Icons.radio),
  ];

  @override
  Widget build(BuildContext context) {
    // StaggeredGridView.countBuilder(crossAxisCount: null, itemBuilder: null, staggeredTileBuilder: null);
    return Scaffold(
      appBar: AppBar(
        title: Text("Example01"),
      ),
      body: Padding(
        padding: EdgeInsets.only(top: 12.0),
        child: StaggeredGridView.count(
          crossAxisCount: 4, // 在横轴上分了几份
          staggeredTiles: _staggeredTiles,
          children: _tiles,
          mainAxisSpacing: 4.0,
          crossAxisSpacing: 4.0,
          padding: EdgeInsets.all(4.0),
        ),
      ),
    );
  }
}

class Example06 extends StatelessWidget {
  List<StaggeredTile> _staggeredTiles = const <StaggeredTile>[
    const StaggeredTile.extent(2, 200),
    const StaggeredTile.extent(2, 150),
    const StaggeredTile.extent(1, 120),
    const StaggeredTile.extent(1, 100),
    const StaggeredTile.extent(2, 150),
    const StaggeredTile.extent(1, 180),
    const StaggeredTile.extent(1, 160),
    const StaggeredTile.extent(3, 170),
    const StaggeredTile.extent(1, 200),
    const StaggeredTile.extent(4, 180),
  ];

  List<Widget> _tiles = const <Widget>[
    const _Example01Tile(Colors.green, Icons.widgets),
    const _Example01Tile(Colors.lightBlue, Icons.wifi),
    const _Example01Tile(Colors.amber, Icons.panorama_wide_angle),
    const _Example01Tile(Colors.brown, Icons.map),
    const _Example01Tile(Colors.deepOrange, Icons.send),
    const _Example01Tile(Colors.indigo, Icons.airline_seat_flat),
    const _Example01Tile(Colors.red, Icons.bluetooth),
    const _Example01Tile(Colors.pink, Icons.battery_alert),
    const _Example01Tile(Colors.purple, Icons.desktop_windows),
    const _Example01Tile(Colors.blue, Icons.radio),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Example01"),
      ),
      body: Padding(
        padding: EdgeInsets.only(top: 12.0),
        child: StaggeredGridView.extent(
          maxCrossAxisExtent: 100,
          staggeredTiles: _staggeredTiles,
          children: _tiles,
          mainAxisSpacing: 4.0,
          crossAxisSpacing: 4.0,
          padding: EdgeInsets.all(4.0),
        ),
      ),
    );
  }
}

class _Example01Tile extends StatelessWidget {
  final Color backgroundColor;
  final IconData iconData;

  const _Example01Tile(this.backgroundColor, this.iconData);

  @override
  Widget build(BuildContext context) {
    return Card(
      color: backgroundColor,
      child: InkWell(
        onTap: () {},
        child: Center(
          child: Padding(
            padding: EdgeInsets.all(4.0),
            child: Icon(
              iconData,
              color: Colors.white,
            ),
          ),
        ),
      ),
    );
  }
}

class Example03 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Example03"),
      ),
      body: StaggeredGridView.count(
        primary: false,
        crossAxisCount: 4,
        mainAxisSpacing: 4.0,
        crossAxisSpacing: 4.0,
        children: const <Widget>[
          const Text("1"),
          const Text("2"),
          const Text("3"),
          const Text("4"),
          const Text("5"),
          const Text("6"),
          const Text("7"),
          const Text("8"),
        ],
        staggeredTiles: const <StaggeredTile>[
          const StaggeredTile.count(2, 2),
          const StaggeredTile.count(2, 1),
          const StaggeredTile.count(2, 2),
          const StaggeredTile.count(2, 1),
          const StaggeredTile.count(2, 2),
          const StaggeredTile.count(2, 1),
          const StaggeredTile.count(2, 2),
          const StaggeredTile.count(2, 1),
        ],
      ),
    );
  }
}


class Example04 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        appBar: new AppBar(
          title: new Text('customScrollView'),
        ),
        body: new CustomScrollView(
          primary: false,
          slivers: <Widget>[
            new SliverStaggeredGrid.count(
              crossAxisCount: 4,
              mainAxisSpacing: 4.0,
              crossAxisSpacing: 4.0,
              children: const <Widget>[
                const Text('1'),
                const Text('2'),
                const Text('3'),
                const Text('4'),
                const Text('5'),
                const Text('6'),
                const Text('7'),
                const Text('8'),
              ],
              staggeredTiles: const <StaggeredTile>[
                const StaggeredTile.count(2, 2),
                const StaggeredTile.count(2, 1),
                const StaggeredTile.count(2, 2),
                const StaggeredTile.count(2, 1),
                const StaggeredTile.count(2, 2),
                const StaggeredTile.count(2, 1),
                const StaggeredTile.count(2, 2),
                const StaggeredTile.count(2, 1),
              ],
            )
          ],
        ));
  }
}


const List<Color> _kColors = const <Color>[
  Colors.green,
  Colors.blue,
  Colors.red,
  Colors.pink,
  Colors.indigo,
  Colors.purple,
  Colors.blueGrey,
];

List<StaggeredTile> _generateRandomTiles(int count) {
  Random rnd = Random();
  return List.generate(count,
          (i) => StaggeredTile.count(1, rnd.nextInt(6) + 1));
}

List<Color> _generateRandomColors(int count) {
  Random rnd = Random();
  return List.generate(count, (i) => _kColors[rnd.nextInt(_kColors.length)]);
}

class Example05 extends StatelessWidget {
  Example05()
      : _tiles = _generateRandomTiles(_kItemCount).toList(),
        _colors = _generateRandomColors(_kItemCount).toList();

  static const int _kItemCount = 1000;
  final List<StaggeredTile> _tiles;
  final List<Color> _colors;

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        appBar: new AppBar(
          title: new Text('RandomTilesRoute'),
        ),
        body: new StaggeredGridView.countBuilder(
          primary: false,
          crossAxisCount: 4,
          crossAxisSpacing: 4.0,
          mainAxisSpacing: 4.0,
          staggeredTileBuilder: _getTile,
          itemBuilder: _getChild,
          itemCount: _kItemCount,
        ));
  }

  StaggeredTile _getTile(int index) => _tiles[index];

  Widget _getChild(BuildContext context, int index) {
    return Card(
      color:_colors[index],
      child: InkWell(
        key: new ObjectKey('$index'),
        onTap: () {},
        child: Center(
          child: Padding(
            padding: EdgeInsets.all(1.0),
            child: CircleAvatar(
              backgroundColor: Colors.white,
              child: new Text('$index'),
            ),
          ),
        ),
      ),
    );
  }
}